<template>
    <CardBox v-if="show" title="楼盘人群信息">
        <SinglePie title="性别" sub-title="男性" :data="sixData"></SinglePie>
        <SinglePie title="婚姻状态" sub-title="已婚" :data="marriageData"></SinglePie>
        <SinglePie title="车产" sub-title="有车" :data="carData"></SinglePie>
        <SinglePie title="宠物状态" sub-title="有宠物" :data="petData"></SinglePie>

        <ManyPie title="年龄" :list="ageList" :data="[]" />
        <ManyPie title="子女状态" :list="kidList" :data="[]" />
        <ManyPie title="教育水平" :list="educationList" :data="[]" />
        <ManyPie title="消费水平" :list="consumptionList" :data="[]" />

        <div class="title">
            人群指数
            <span class="desc">（根据<span class="red">百度搜索偏好</span>划分圈层人群后按TGI排序）</span>
        </div>
        <Ranking :list="crowdIndexList" />

        <div class="title margit-top">
            消费指数
            <span class="desc">（根据<span class="red">京东消费偏好</span>划分类目人群后按TGI排序）</span>
        </div>
        <Ranking :list="consumptionIndexList" />
    </CardBox>
</template>

<script lang="ts"  setup>
import { watch, ref } from 'vue';
import CardBox from './components/CardBox.vue';
import SinglePie from './components/SinglePie/index.vue';
import ManyPie from './components/ManyPie/index.vue';
import Ranking from './components/Ranking.vue';
import { getCrowdTagData } from '@/api/onePage';
import {handleRatio, toFixedTwo} from '@/utils/index';
import type { DataItem, ListItem } from './onePage.module';

const props = defineProps({
    premiseId: {
        type: String,
        require: true,
        default: '',
    },
});

const sixData = ref<DataItem[]>([]);
const marriageData = ref<DataItem[]>([]);
const carData = ref<DataItem[]>([]);
const petData = ref<DataItem[]>([]);
const ageList = ref<ListItem[]>([]);
const kidList = ref<ListItem[]>([]);
const educationList = ref<ListItem[]>([]);
const consumptionList = ref<ListItem[]>([]);
const crowdIndexList = ref<ListItem[]>([]);
const consumptionIndexList = ref<ListItem[]>([]);
const show = ref(true);


// 处理只有一个数据的饼图
const handleSingleData = (obj: { [key: string]: number }, key: string) => {
    if (!obj || !key || !obj[key]) {
        return [{ value: 0 }, { value: 0 }];
    }
    const num = obj[key];
    const val = handleRatio(+num,undefined,2) as unknown as number || 0;
    return [{ value: +val }, { value: 100 - +val }];
};


// 处理TGI 数据：以第一个数据为基准计算百分比
const handleTGI = (dataObj: { [x: string]: number | string; }) => {
    const cacheList: ListItem[] = [];
    for (const key in dataObj) {
        cacheList.push({ name: key, value: Number(dataObj[key]) || 0 });
    }

    const baseVal = cacheList[0].value;
    return cacheList.map((item: ListItem) => {
        const { name, value } = item;
        return { name, value, percentage: handleRatio(value / baseVal) as number || 0 };
    });

};

// 处理排行榜数据
const handleRankingData = (obj: { [x: string]: number | string; },type?:string) => {
    const _cacheList = [];
    for (const key in obj) {
        _cacheList.push({ name: key, value: handleRatio(Number(obj[key]),undefined,type?2:0) as number || 0 });
    }
    return _cacheList;
};

const initData = async () => {
    if (!props.premiseId) {
        return;
    }
    const res = await getCrowdTagData(props.premiseId).catch(()=>undefined);
    if (res) {
        ageList.value = handleRankingData(res.age,'age');
        kidList.value = handleRankingData(res.kid,'kid');
        educationList.value = handleRankingData(res.education,'education');
        consumptionList.value = handleRankingData(res.consumption,'consumption');

        crowdIndexList.value = handleTGI(res.crowdIndex);
        crowdIndexList.value = crowdIndexList.value.map(item => {
            return {
                ...item,
                value: toFixedTwo(item.value)
            };
        });

        consumptionIndexList.value = handleTGI(res.consumptionIndex);
        if (consumptionIndexList.value.length > 10) {
            consumptionIndexList.value = consumptionIndexList.value.slice(0, 10);
        }
        consumptionIndexList.value = consumptionIndexList.value.map(item => {
            const name = item.name.replace('人群', '');
            return {
                ...item,
                name,
                value: toFixedTwo(item.value),
            };
        });

        carData.value = handleSingleData(res.car as unknown as { [key: string]: number }, '有车');
        sixData.value = handleSingleData(res.gender as unknown as { [key: string]: number }, '男');
        marriageData.value = handleSingleData(res.marriage as unknown as { [key: string]: number }, '已婚');
        petData.value = handleSingleData(res.pet as unknown as { [key: string]: number }, '有宠物');
    }else{
        show.value=false;
    }

};

watch(
    () => props.premiseId,
    async () => {
        await initData();
    }
);

</script>

<style lang="scss" scoped>
.title {
    color: #181819;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;

    .desc {
        color: #999999;
        font-size: 12px;
        font-weight: 400;

        .red {
            color: #e60044;
        }
    }
}

.margit-top {
    margin-top: 30px;
}
</style>
